<template>
  <div class="mainBody">
    <div class="leftBody">
      <div class="leftHeader">
        <span>
          在线库列表
        </span>
        <div></div>
        <img @click="visibles.visibleAddOnlineWarehouse = true" src="@/static/buttonImg/addButton.png" alt="">
      </div>
      <div class="leftMain">
        <el-input  v-model="onlineWarehouseSearchKeyword" placeholder="输入在线库名称查询"></el-input>
          <el-table
            :show-header="false"
            :data="mainOnlineWarehouseList"
            :max-height="leftTableMaxHeight"
          >
            <el-table-column
              prop="name"
            >
            </el-table-column>

          </el-table>
      </div>
    </div>


    <div class="rightBody">

      <div class="rightHeader">
        <span>
          贴源表列表
        </span>

        <div></div>
        <el-button
          @click="visibles.visibleAddTieYuanTable = true"
          type="primary">
          新增
        </el-button>
      </div>



      <div class="rightMain">

        <el-tabs v-model="activeName">
          <el-tab-pane label="贴源表" name="贴源表">
            <el-input v-model="mainTableSearchKeyword" placeholder="请输入表名/物理表名检索">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>


            <el-table
              height="100%"
              border
              :data="showTableData"
              :row-class-name="tableRowClassName"
              :max-height="rightTableMaxHeight"
            >
              <el-table-column
                prop="physicsTableName"
                label="物理表名"
              >
              </el-table-column>
              <el-table-column
                prop="tableName"
                label="表名"
              >
              </el-table-column>
              <el-table-column
                prop="dataVolume"
                label="数据量"
              >
              </el-table-column>
              <el-table-column
                prop="upDateTime"
                label="数据上次更新"
              >
              </el-table-column>
              <el-table-column
                prop="taskRuntime"
                label="任务上次运行"
              >
              </el-table-column>
              <el-table-column
                prop="status"
                label="启用状态"
              >
              </el-table-column>

              <el-table-column
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleDetails(scope.$index, scope.row)">详情</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>

            <el-footer id="Footer" style="margin-top: 20px;">
              <!--分页功能-->
              <!--当前行数与总数据条数-->
              <el-row :gutter="30">
                <el-col :span="17">
                  <div id="now_line_number">共{{totalNumber}}条数据</div>
                </el-col>
                <el-col :span="7">
                  <div>
                    <el-pagination
                      id="controlBigPosition"
                      background
                      :current-page="currentPage"
                      :page-sizes="[20, 50, 100, 200, 300]"
                      :page-size="size"
                      layout="sizes, prev, pager, next, jumper"
                      :total="totalNumber"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-footer>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="贴源代码">配置管理</el-tab-pane>
        </el-tabs>
      </div>

    </div>


    <el-dialog title="添加在线库"
      :visible.sync="visibles.visibleAddOnlineWarehouse"
      width="600px"
      top="10vh"

    >
      <el-form
        :model="addOnlineWarehouseList"
        label-width="170px"
      >
        <el-form-item label="来源库" required>
          <el-select style="width: 300px" v-model="addOnlineWarehouseList.sourceWarehouse" placeholder="选择未存在于在线库中的数据源">
            <el-option v-for="item in dataSourceList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据变更保留版本数" required>
          <el-input-number style="width: 300px" v-model="addOnlineWarehouseList.reserveVersionNum" :min="1" :max="10" label="请选择数量"></el-input-number>
        </el-form-item>
        <el-form-item label="数据变更保留天数" required>
          <el-input-number style="width: 300px" v-model="addOnlineWarehouseList.reserveDateNum" :min="1" :max="10" label="请选择数量"></el-input-number>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="success">测 试</el-button>
        <el-button @click="visibles.visibleAddOnlineWarehouse = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddOnlineWarehouse()">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新增贴源表(第一步)"
      width="800px"
      top="10vh"
      :visible.sync="visibles.visibleAddTieYuanTable"
    >

      <div>
        <el-steps :active="1" style="width: 600px; margin: 0 auto" align-center>
          <el-step title="选择源头表"></el-step>
          <el-step title="配置采集任务"></el-step>

        </el-steps>
      </div>
      <div class="addTableDialogSearchBox">
        <div>
          <span>schema: </span>
          <el-select>
            <el-option v-for="item in tieYuanTableList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <span>源头表名/备注：</span>
          <el-input v-model="step1Search.nameAndNote" style="width: 200px"></el-input>
        </div>
        <div>
          <span>源头表类型：</span>
          <el-input v-model="step1Search.type" style="width: 200px"></el-input>
        </div>
      </div>
      <div>
        <el-table
          height="100%"
          border
          :data="showSourceTableList"
          @selection-change="handleSelectionChange"
          max-height="400px"
          style="margin-top: 20px;"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="源头表名"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
          >
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注"
          >
          </el-table-column>

        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visibles.visibleAddTieYuanTable = false">取 消</el-button>
        <el-button type="primary" @click="goToStep2()">下一步</el-button>
      </span>
    </el-dialog>


    <el-dialog title="新增贴源表(第二步)"
       :visible.sync="visibles.visibleAddTieYuanTable2"
       width="50%"
       top="10vh"
    >
      <div class="step2Header">
        <el-steps :active="2" style="width: 600px; margin: 0 auto" align-center>
          <el-step title="选择源头表"></el-step>
          <el-step title="配置采集任务"></el-step>
        </el-steps>
      </div>
      <div class="step2Main">
        <div class="step2LeftMain">
          <el-input v-model="step2SearchKeyword" placeholder="请输入表名检索">
          </el-input>
          <el-tree :data="step2ShowLeftData" :props="defaultProps" @node-click="step2LeftClick"></el-tree>
        </div>
        <div class="step2RightMain">
          <el-form ref="form" :model="step2Form" label-width="80px">
            <el-form-item label="同步方式">
              <el-select v-model="step2Form.syncMethod" placeholder="请选择同步方式">
                <el-option label="全量同步" value="全量同步"></el-option>
<!--                <el-option label="增量同步" value="增量同步"></el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item label="调度周期">
              <el-select v-model="step2Form.dispatchCycle" placeholder="请选择调度周期">
                <el-option label="每天" value="每天"></el-option>
                <el-option label="每周" value="每周"></el-option>
                <el-option label="每月" value="每月"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-table :data="step2RightTableData">
                <el-table-column
                  label="字段名"
                  prop="name"
                >
                </el-table-column>
                <el-table-column
                  label="字段注释"
                  prop="note"
                >
                </el-table-column>
                <el-table-column
                  label="字段类型"
                  prop="type"
                >
                </el-table-column>

                <el-table-column
                  label="是否主键"
                >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isPrimaryKey"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  label="是否采集"
                >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isCollect"></el-checkbox>
                  </template>
                </el-table-column>

              </el-table>
            </el-form-item>


          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibles.visibleAddTieYuanTable2 = false">取 消</el-button>
        <el-button type="primary" @click="step2GoBack()">上一步</el-button>
        <el-button type="success" @click="addTieYuanTableSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {onlineWarehouseTableData} from "@/views/tieYuan/data";

export default {
  name: "OnlineWarehouseManage",
  components: {
  },
  data(){
    return {
      totalNumber: 21,
      currentPage: 1,
      size: 20,
      step2RightTableData: [
        {
          name: '字段1',
          note: '字段1注释',
          type: '字段1类型',
          isPrimaryKey: false,
          isCollect: true,
        },
        {
          name: '字段2',
          note: '字段2注释',
          type: '字段2类型',
          isPrimaryKey: true,
          isCollect: true,
        },
        {
          name: '字段3',
          note: '字段3注释',
          type: '字段3类型',
          isPrimaryKey: false,
          isCollect: true,
        },
        {
          name: '字段3',
          note: '字段3注释',
          type: '字段3类型',
          isPrimaryKey: false,
          isCollect: true,
        },
        {
          name: '字段3',
          note: '字段3注释',
          type: '字段3类型',
          isPrimaryKey: false,
          isCollect: true,
        },
        {
          name: '字段3',
          note: '字段3注释',
          type: '字段3类型',
          isPrimaryKey: false,
          isCollect: true,
        },
        {
          name: '字段3',
          note: '字段3注释',
          type: '字段3类型',
          isPrimaryKey: false,
          isCollect: true,
        },
      ],
      step2Form: {
        //同步方式
        syncMethod: '全量同步',
        //调度周期
        dispatchCycle: '每天',
      },
      step2RightSearchKeyword: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      step2ShowLeftData: [],
      step2AllLeftData: [
        {
          label: '表',
          children: [
            {label: '表1'},{label: '表2'},{label: '表3'},
          ]
        }, {
          label: '同义词',
          children: [
            {label: '二级 2-1'}, {label: '二级 2-2',}
          ]
        }, {
          label: '视图',
          children: [
            {label: '二级 3-1',}
          ]
        }
      ],
      step1Search:{
        nameAndNote: '',
        type: ''
      },
      visibles:{
        //新增在线库
        visibleAddOnlineWarehouse: false,
        //新增贴源表
        visibleAddTieYuanTable: false,
        visibleAddTieYuanTable2: false,
      },
      showSourceTableList: [],
      //源头表
      allSourceTableList: [
        {
          name: 'RSV_BOOK1',
          type: '视图1',
          note: '图书视图1'
        },
        {
          name: 'TAB_BOOK2',
          type: '表2',
          note: '图书表2'
        },
        {
          name: 'RSV_BOOK3',
          type: '视图3',
          note: '图书视图3'
        },
        {
          name: 'TAB_BOOK4',
          type: '表4',
          note: '图书表4'
        },
        {
          name: 'RSV_BOOK5',
          type: '视图5',
          note: '图书视图5'
        },
        {
          name: 'TAB_BOOK6',
          type: '表6',
          note: '图书表6'
        },
        {
          name: 'RSV_BOOK7',
          type: '视图7',
          note: '图书视图7'
        },
        {
          name: 'TAB_BOOK8',
          type: '表8',
          note: '图书表8'
        },
        {
          name: 'RSV_BOOK9',
          type: '视图9',
          note: '图书视图9'
        },
        {
          name: 'TAB_BOOK10',
          type: '表10',
          note: '图书表10'
        },
        {
          name: 'RSV_BOOK11',
          type: '视图11',
          note: '图书视图11'
        },
        {
          name: 'TAB_BOOK12',
          type: '表12',
          note: '图书表12'
        },
        {
          name: 'RSV_BOOK13',
          type: '视图13',
          note: '图书视图13'
        },
        {
          name: 'TAB_BOOK14',
          type: '表14',
          note: '图书表14'
        },
        {
          name: 'RSV_BOOK15',
          type: '视图15',
          note: '图书视图15'
        },
        {
          name: 'TAB_BOOK16',
          type: '表16',
          note: '图书表16'
        },
        {
          name: 'RSV_BOOK17',
          type: '视图17',
          note: '图书视图17'
        },
        {
          name: 'TAB_BOOK18',
          type: '表18',
          note: '图书表18'
        },
        {
          name: 'RSV_BOOK19',
          type: '视图19',
          note: '图书视图19'
        },
        {
          name: 'TAB_BOOK20',
          type: '表20',
          note: '图书表20'
        },
        {
          name: 'RSV_BOOK21',
          type: '视图21',
          note: '图书视图'
        }
      ],
      addOnlineWarehouseList: {
        sourceWarehouse: '',
        reserveVersionNum: '',
        reserveDateNum: ''
      },
      dataSourceList: [
        {
          name: '学生系统数据源',
          id: '001'
        },
        {
          name: '教师系统数据源',
          id: '002'
        },
        {
          name: '职工系统数据源',
          id: '003'
        }
      ],
      tieYuanTableList: [
        {
          name: '学生信息表',
          id: '001'
        },
        {
          name: '教师信息表',
          id: '002'
        },
        {
          name: '职工信息表',
          id: '003'
        }
      ],
      step2SearchKeyword: '',
      leftTableMaxHeight: 5,
      rightTableMaxHeight: 5,
      onlineWarehouseSearchKeyword: '',
      // "学工系统", "人事系统", "财务系统", "教务系统"
      mainOnlineWarehouseList:[
        {name: "学工系统", id: 1},
        {name: "人事系统", id: 2},
        {name: "财务系统", id: 3},
        {name: "教务系统", id: 4},
      ],
      allOnlineWarehouseList:[
        {name: "学工系统", id: 1},
        {name: "人事系统", id: 2},
        {name: "财务系统", id: 3},
        {name: "教务系统", id: 4},
      ],
      activeName: '贴源表',
      showTableData: [],
      allTableData: onlineWarehouseTableData


    }
  },
  methods: {
    //跳转到详情页
    handleDetails(index, row) {
      console.log('跳转到详情页', index, row);
      //跳转到tieyuanDataDetails页面
      this.$router.push({path: '/tieYuan/tieYuanTableDetails', query: {row: row}});
    },
    //新增贴源表提交
    addTieYuanTableSubmit(){
      this.visibles.visibleAddTieYuanTable2 = false;
      console.log('新增贴源表提交');
    },
    //新增贴源表第二步返回第一步
    step2GoBack(){
      this.visibles.visibleAddTieYuanTable2 = false;
      this.visibles.visibleAddTieYuanTable = true;
    },
    //新增贴源表第二步的左侧树的点击事件
    step2LeftClick(data){
    },
    //初始化数据
    initData(){
      this.showSourceTableList = this.allSourceTableList;
      this.step2ShowLeftData = JSON.parse(JSON.stringify(this.step2AllLeftData));
      for (let i = 0; i < this.step2ShowLeftData.length; i++) {
        if(i === 0)
          this.step2ShowLeftData[i].label = '表' + '(' + this.step2ShowLeftData[i].children.length + ')';
        else if(i === 1)
          this.step2ShowLeftData[i].label = '同义词' + '(' + this.step2ShowLeftData[i].children.length + ')';
        else if(i === 2)
          this.step2ShowLeftData[i].label = '视图' + '(' + this.step2ShowLeftData[i].children.length + ')';
      }
    },
    handleSelectionChange(val) {

    },
    goToStep2() {

      this.visibles.visibleAddTieYuanTable = false;
      this.visibles.visibleAddTieYuanTable2 = true;
    },
    //每页最大条数
    handleSizeChange(val) {
      this.size = val;
      this.currentPage = 1;
      this.getAllTableData();
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllTableData();
    },
    confirmAddOnlineWarehouse() {

      this.visibles.visibleAddOnlineWarehouse = false;
    },
    //获取所有表格数据
    getAllTableData() {
      this.showTableData = this.allTableData.slice((this.currentPage - 1) * this.size, this.currentPage * this.size);
    },
    //表格行的样式
    tableRowClassName({row, rowIndex}) {
      if (row.status === '已停用') {
        return 'red';
      }
      return '';
    },
    //初始化mainBody的高度
    initMainBodyHeight() {
      //获取浏览器的高度，将mainBody的高度设置为屏幕的高度减去header的高度
      let screenHeight = document.documentElement.clientHeight;
      let headerHeight = 85;
      let mainBody = document.getElementsByClassName("mainBody")[0];
      mainBody.style.height = screenHeight - headerHeight + "px";
    },
    initTableHeight() {
      let screenHeight = document.documentElement.clientHeight;
      let headerHeight = 85;
      this.leftTableMaxHeight = screenHeight - headerHeight - 105;
      this.rightTableMaxHeight = screenHeight - headerHeight - 250;
    },
    //判断一个字符串中出现最多的字符，统计其次数
    getMaxChar(str) {
      let obj = {};
      for (let i = 0; i < str.length; i++) {
        let char = str.charAt(i);
        if (obj[char]) {
          obj[char]++;
        } else {
          obj[char] = 1;
        }
      }
      let maxChar = '';
      let maxNum = 0;
      for (let key in obj) {
        if (obj[key] > maxNum) {
          maxChar = key;
          maxNum = obj[key];
        }
      }
      return maxChar + '出现了' + maxNum + '次';
    },

  },
  beforeMount() {
    //初始化leftTable的高度
    this.initTableHeight()
  },
  mounted() {
    //初始化mainBody的高度
    this.initMainBodyHeight()
    //初始化数据
    this.initData()
    this.getAllTableData();
  },
  watch: {
    //监听在线库搜索框
    onlineWarehouseSearchKeyword(val) {
      //过滤onlineWarehouseList
      if (val){
        this.mainOnlineWarehouseList = this.allOnlineWarehouseList.filter(item => {
          if (item.name)
            return item.name.indexOf(val) > -1;
          else
            return true;
        });
      }
      else {
        this.mainOnlineWarehouseList = this.allOnlineWarehouseList;
      }
    },
    //监听新增贴源表第一步的搜索框
    step1Search: {
      handler(val) {
        //过滤showSourceTableList
        if (val.nameAndNote || val.type){
          this.showSourceTableList = this.allSourceTableList.filter(item => {
            //同时过滤name和note和type
            if (val.nameAndNote && val.type){
              return (item.name.indexOf(val.nameAndNote) > -1 || item.note.indexOf(val.nameAndNote) > -1) && item.type.indexOf(val.type) > -1;
            }
            //只过滤name和note
            else if (val.nameAndNote){
              return item.name.indexOf(val.nameAndNote) > -1 || item.note.indexOf(val.nameAndNote) > -1;
            }
            //只过滤type
            else if (val.type){
              return item.type.indexOf(val.type) > -1;
            }
            else {
              return true;
            }

          });
        }
        else {
          this.showSourceTableList = this.allSourceTableList;
        }
      },
      deep: true,
      immediate: true,
    },
    //监听新增贴源表第二步的搜索框
    step2SearchKeyword: {
      immediate: true,
      handler(val) {
        if (val) {
          for (let i = 0; i < this.step2AllLeftData.length; i++) {
            let tmp2 = JSON.parse(JSON.stringify(this.step2AllLeftData[i].children));
            this.step2ShowLeftData[i].children = tmp2.filter(item => {
              return item.label.indexOf(val) > -1;
            })
          }
          for (let i = 0; i < this.step2ShowLeftData.length; i++) {
            if(i === 0)
              this.step2ShowLeftData[i].label = '表' + '(' + this.step2ShowLeftData[i].children.length + ')';
            else if(i === 1)
              this.step2ShowLeftData[i].label = '同义词' + '(' + this.step2ShowLeftData[i].children.length + ')';
            else if(i === 2)
              this.step2ShowLeftData[i].label = '视图' + '(' + this.step2ShowLeftData[i].children.length + ')';
          }
          //重新渲染树
          this.step2ShowLeftData = JSON.parse(JSON.stringify(this.step2ShowLeftData));

        } else {
          this.step2ShowLeftData = JSON.parse(JSON.stringify(this.step2AllLeftData));
          for (let i = 0; i < this.step2ShowLeftData.length; i++) {
            if(i === 0)
              this.step2ShowLeftData[i].label = '表' + '(' + this.step2ShowLeftData[i].children.length + ')';
            else if(i === 1)
              this.step2ShowLeftData[i].label = '同义词' + '(' + this.step2ShowLeftData[i].children.length + ')';
            else if(i === 2)
              this.step2ShowLeftData[i].label = '视图' + '(' + this.step2ShowLeftData[i].children.length + ')';
          }
        }
      }
    }
  }
}
</script>


<style scoped>
.step2Main {
  width: 100%;
  height: 50vh;
  margin-top: 2vh;
}
.step2Main .step2LeftMain{
  width: 35%;
  height: 100%;
  padding-right: 2%;
  float: left;
  border-right: 1px solid #d9d9d9;
}
.step2Main .step2RightMain{
  width: 60%;
  height: 90%;
  overflow-y: scroll;
  float: left;
}

.addTableDialogSearchBox {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
>>>.el-table .red {
  color: red!important;
}
.mainBody {
  display: grid;
  grid-template-columns: 1fr 6fr;
  width: 100%;
}

/* 左边部分 ************************************************************************************/
.leftBody {
  border-right: 1px solid #d9d9d9;
  background-color: white;
  height: 100%;
  padding: 20px 15px 0;
}
.leftHeader {
  display: grid;
  line-height: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
  position: relative;
}
.leftHeader span {
  font-size: 20px;
  font-weight: bold;
}
.leftHeader img {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 6px;
}
.leftHeader img:hover {
  cursor: pointer;
}

.leftMain .el-input {
  width: 100%;
  margin-top: 10px;
}
.leftMain .leftTableBox {
  overflow: scroll;
}

/* 右边部分 ************************************************************************************/
.rightBody {
  background-color: white;
  height: 100%;
  padding: 0 20px;
}
.rightHeader {
  display: grid;
  line-height: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
  position: relative;
}
.rightHeader .el-input {
  position: absolute;
  left: 200px;
  top: 8px;
  width: 200px;
  display: inline-block;
}
.rightHeader span {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  margin-top: 15px;
}
.rightHeader button {
  width: 60px;
  height: 35px;
  line-height: 30px;
  position: absolute;
  right: 20px;
  margin: 7px 0 0;
  padding: 0;
}
.rightMain .el-input {
  width: 280px;
  margin-bottom: 15px;
}


</style>
